<template>
  <div class="comment-list-box">
    <div class="title">评论</div>
    <comment-form
      :placeholder="'输入评论...'"
      :quoteId="0"
      :articleId="articleId"
      @commentSuccessOne="commentSuccessOne"
    ></comment-form>
    <comment-list :articleId="this.articleId" :quoteId="0" ref="comList"></comment-list>
  </div>
</template>

<script>
import commentForm from './form/commentForm'
import commentList from './list/commentlist'
export default {
  name: '',
  props: {
    articleId: Number
  },
  components: {
    commentForm,
    commentList
  },
  methods: {
    commentSuccessOne (data) {
      this.$refs.comList.addComment(data)
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.comment-list-box
  position relative
  overflow hidden
  .title
    text-align center
    padding .4rem .1rem
    font-size .32rem
    color $theme-3-color
</style>
